<!--  -->
<template>
  <div class="flex-column rela container" v-loading.fullscreen.lock="fullscreenLoading">
    <img class="index-img" src="./img/index.png" alt="" />
    <div class="mask flex-row align-center">
      <!-- 上方导航 -->
      <div class="w-100P flex-row-center navbar-container">
        <div class="navbar flex-row justify-between align-center">
          <!-- logo -->
          <div class="flex-row-center">
            <img class="logo" src="./img/5g-logo.png" alt="" />
            <div class="logo-text">岭南数字产业大脑</div>
          </div>
          <!--  登陆按钮 -->
          <div class="flex-row align-center">
            <div v-if="getUserInfo" class="login-text">
              欢迎回来! {{getUserInfo.userVo.account}}
            </div>
            <el-button v-else class="login-btn" type="primary" @click="handleNavLogin">
              登录
            </el-button>
            <div v-if="getUserInfo" class="logout-text" @click="handleLogout">退出登录</div>
          </div>
        </div>
      </div>
    </div>

    <!-- title -->
    <div class="title abso w-100P flex-row-center">助你享受5G新生活</div>
    <!-- desc -->
    <div class="desc-container w-100P abso flex-row-center">
      <div class="desc flex-row justify-between align-center">
        <div>首次咨询免费</div>
        <div>/</div>
        <div>专业定制服务</div>
        <div>/</div>
        <div>转型全程指导</div>
        <div>/</div>
        <div>提供支持技术</div>
      </div>
    </div>

    <!-- 描述表格 -->
    <div class="info-card-container w-100P abso flex-row-center">
      <div class="info-card flex-row">
        <div class="card flex-row-center">
          <img class="cloud-img img" src="./img/cloud.png" alt="" />
          <div>
            <div class="title">智能</div>
            <div class="desc">多领域AI算法，大量数据处理经验，全方 位管理，做最懂你的平台</div>
          </div>
        </div>
        <div class="split"></div>
        <div class="card flex-row-center">
          <img class="cloud-img img" src="./img/cloud.png" alt="" />
          <div>
            <div class="title">简单</div>
            <div class="desc">三大平台让您的管理触手可及让您使用体 验佳，让您的用户放心</div>
          </div>
        </div>
        <div class="split"></div>
        <div class="card flex-row-center">
          <img class="cloud-img img" src="./img/cloud.png" alt="" />
          <div>
            <div class="title">高效</div>
            <div class="desc">
              全面降低数据建设以及管理成本，高效的 数据处理能力助力提升企业效率
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 应用场景 -->
    <div class="app-title w-100P flex-row-center">应用场景</div>
    <div class="carousel-container rela flex-row-center">
      <el-carousel
        ref="carousel"
        class="card-container"
        indicator-position="none"
        arrow="never"
        :interval="5000"
      >
        <el-carousel-item v-for="item in appScenariosList" :key="item.id">
          <div class=" flex-row-center ">
            <div class="card flex-row-center">
              <img class="img" :src="item.leftInfo.logo" alt="" />
              <div>
                <div class="title">{{item.leftInfo.title}}</div>
                <div class="desc">{{item.leftInfo.desc}}</div>
                <div>
                  <span class="tip-text" @click="handleNavFrontSystem(item.leftInfo)">
                    前台管理
                    <i class="el-icon-arrow-right"></i>
                  </span>
                  <span class="tip-text mg-left-6" @click="handeNavMamageSystem(item.leftInfo)">
                    后台管理
                    <i class="el-icon-arrow-right"></i>
                  </span>
                </div>
              </div>
            </div>

            <div class="card flex-row-center mg-left-card">
              <img class="img" :src="item.rightInfo.logo" alt="" />
              <div>
                <div class="title">{{item.rightInfo.title}}</div>
                <div class="desc">{{item.rightInfo.desc}}</div>
                <div>
                  <span class="tip-text" @click="handleNavFrontSystem(item.rightInfo)">
                    前台管理
                    <i class="el-icon-arrow-right"></i>
                  </span>
                  <span class="tip-text mg-left-6" @click="handeNavMamageSystem(item.rightInfo)">
                    后台管理
                    <i class="el-icon-arrow-right"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <img class="arrow-left arrow abso" src="./img/arrow-left.png" alt="" @click="handlePrev" />
      <img class="arrow-right arrow abso" src="./img/arrow-right.png" alt="" @click="handleNext" />
    </div>

    <!-- 各平台 -->
    <div class="banner" v-for="(item, index) in applicationPlatformList" :key="item.id">
      <div class="flex-row-center banner-left" v-if="index % 2 === 0">
        <div class="rela">
          <div class="line"></div>

          <div class="title">{{item.title}}</div>
          <div class="sub-title">{{item.subTitle}}</div>
          <div class="desc" v-for="descItem in item.desc" :key="descItem">{{descItem}}</div>
          <div class="nav" @click="handeNavMamageSystem(item)">
            前往使用
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <img
          class="img "
          :src="item.isShowActive ? item.active : item.img"
          @mouseenter="handleImgMouseEnter(index)"
          @mouseleave="handleImgMouseLeave(index)"
          @click="handeNavMamageSystem(item)"
          alt=""
        />
        <!-- <img class="img active-img" :src="item.active" alt="" /> -->
      </div>
      <div v-else class="banner-right flex-row-center">
        <img
          class="img "
          :src="item.isShowActive ? item.active : item.img"
          @mouseenter="handleImgMouseEnter(index)"
          @mouseleave="handleImgMouseLeave(index)"
          @click="handeNavMamageSystem(item)"
          alt=""
        />
        <div class="rela">
          <div class="line"></div>
          <div class="title">{{item.title}}</div>
          <div class="sub-title">{{item.subTitle}}</div>
          <div class="desc" v-for="descItem in item.desc" :key="descItem">{{descItem}}</div>
          <div class="nav" @click="handeNavMamageSystem(item)">
            前往使用
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系我们 -->
    <div class="contace-us-container flex-row-center">
      <div class="title">联系我们</div>
      <div class="flex-column info">
        <div class="sub-title">关于我们</div>
        <div class="desc">成为领先的数字孪生关键技术研发平台</div>
        <div class="sub-title address">地址</div>
        <div class="desc flex-row align-center">
          <img class="icon" src="./img/phone.png" alt="" />
          <div class="mg-left-10">0756-6348393</div>
        </div>
        <div class="desc flex-row align-center">
          <img class="icon" src="./img/address.png" alt="" />
          <div class="mg-left-10">珠海市香洲区港湾一号湾 11 栋 5 层</div>
        </div>
        <div class="desc flex-row align-center">
          <img class="icon" src="./img/web.png" alt="" />
          <div class="mg-left-10">http://www.chiefdata.org:60080/zh/index.html</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserData } from '@/utils/auth'
import { mapActions } from 'vuex'
import { apiBindSceneId } from '@/api/dealRouter'

export default {
  data() {
    return {
      applicationPlatformList: [
        {
          id: '1425739668951080962',
          title: '共性技术赋能与应用支撑平台',
          subTitle: '融合其他三大平台技术，实现多产业、多维度技术支持，产品输出',
          desc: [
            '提供丰富的云产品',
            '辅助多应用场景下的智能决策',
            '支持模块化和自定义产品配置',
            '多维度结合5G能力，实现数字孪生智能化、数字化',
          ],
          img: require('./img/com.png'),
          active: require('./img/com-active.png'),
          isShowActive: false,
        },
        {
          id: '1425742600660525058',
          title: '人工智能平台',
          subTitle: '囊括了目前最主流的人工智能算法，可部署在各个应用场景中',
          desc: [
            '拥有集成开发，可视化开发等多种开发环境，开发快捷',
            'AI资产管理，实现透明化和智能化的功能',
            '智能调控运算资源，减少运算成本',
            '拥有多类AI核心技术，研发中能根据需求随意使用',
          ],
          img: require('./img/tell.png'),
          active: require('./img/tell-active.png'),
          isShowActive: false,
        },
        {
          id: '1425742678657802241',
          title: '数据处理与融合平台',
          subTitle: '大数据专业处理平台，集管理与开发于一体，支持数据治理，数据安全',
          desc: [
            '提供丰富的数据开发套件',
            '辅助实现资产打标及数据盘点等效果',
            '支持全面的日志统计和监控告警功能',
            '发现异常及时告警，便于管理员对数据进行维护',
          ],
          img: require('./img/data.png'),
          active: require('./img/data-active.png'),
          isShowActive: false,
        },
        {
          id: 3,
          title: '感知和智能化管理平台',
          subTitle: '成熟的物联网架构体系，从输入端到输出端一体化的监控和管理',
          desc: [
            '拥有集成开发，可视化开发等多种开发环境，开发快捷',
            'AI资产管理，实现透明化和智能化的功能',
            '智能调控运算资源，减少运算成本',
            '拥有多类AI核心技术，研发中能根据需求随意使用',
          ],
          img: require('./img/perception.png'),
          active: require('./img/perception-active.png'),
          isShowActive: false,
          isNavOtherSystem: true,
          url: 'http://192.168.68.113:8800/#/user/login',
        },
      ],
      fullscreenLoading: false,
    }
  },

  components: {},

  computed: {
    appScenariosList() {
      return [
        {
          id: 0,
          leftInfo: {
            id: '1403279795235827713',
            title: '5G安防',
            desc: '透过5G融合人工智能的4K、8K安防监控解决方案以及相关应用，更多安防设备与功能的叠加，以及视觉识别、云平台、大数据等手段实现无感采集、无感预警、多级布控等能力，大幅度提升园区安全水平。',
            logo: require('./img/5g.png'),
          },
          rightInfo: {
            id: '1399249515848028161',
            title: '产业分析',
            desc: '对各个产业及各细分市场规模及发展现状、趋势等数据进行研究分析和探索，用图谱清楚的准确的反映出一个行业每一个领域的数据，为企业提供前瞻性产业关键信息。',
            logo: require('./img/industry.png'),
          },
        },
        {
          id: 1,
          leftInfo: {
            id: '1399249458683858945',
            title: '智慧园区',
            desc: '智慧园区打通园区规划、设计推演、施工建设、品宣招商、持续运营、物业管理等场景,助力园区运营方建设智慧园区,提升管理效率,快速完成园区入驻指标。',
            logo: require('./img/wisdom.png'),
          },
          rightInfo: {
            id: '1399249543400411137',
            title: '工业视觉',
            desc: '结合工业AI视觉与感知算法，帮助检测产品缺陷、视觉引导机器人、协助确保生产环境安全，此外还可以帮助优化工厂运营，提升整体效率。',
            logo: require('./img/industrial.png'),
          },
        },
      ]
    },
    getUserInfo() {
      return getUserData()
    },
  },

  methods: {
    ...mapActions({
      logout: 'user/logout',
    }),
    handlePrev() {
      this.$refs.carousel.prev()
    },
    handleNext() {
      this.$refs.carousel.next()
    },
    handleImgMouseEnter(index) {
      this.applicationPlatformList[index].isShowActive = true
    },
    handleImgMouseLeave(index) {
      this.applicationPlatformList[index].isShowActive = false
    },
    handleNavLogin() {
      this.$router.push('/login')
    },
    handleLogout() {
      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
      }).then(() => {
        this.logout().then(() => {
          this.$router.push('/login')
        })
      })
    },
    async handleNavFrontSystem(item) {
      if (!this.getUserInfo) {
        return this.$router.push(`/login?sceneId=${item.id}&isFront=true`)
      }
      this.fullscreenLoading = true

      try {
        await apiBindSceneId(item.id)

        // window.location.href = this.$consts.AccessUrl.frontUrl
        window.location.replace(this.$consts.AccessUrl.frontUrl)
      } catch (error) {
        console.log('handleNavFrontSystem', error)
      } finally {
        this.fullscreenLoading = false
      }
    },
    async handeNavMamageSystem(item) {
      if (!this.getUserInfo) {
        return this.$router.push(`/login?sceneId=${item.id}`)
      }
      this.fullscreenLoading = true

      try {
        await apiBindSceneId(item.id)
        if (item.isNavOtherSystem) {
          // window.location.href = item.url
          window.location.replace(item.url)
        } else {
          // window.location.href = this.$consts.AccessUrl.manageUrl
          window.location.replace(this.$consts.AccessUrl.manageUrl)
        }
      } catch (error) {
        console.log('handeNavMamageSystem', error)
      } finally {
        this.fullscreenLoading = false
      }
    },
  },
}
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  // height: 100%;
  // overflow: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #f8f8fd;
  box-sizing: border-box;
}

.index-img {
  width: vw(1920px);
  height: auto;
}

.navbar-container {
  // top: vw(28px);

  .navbar {
    width: vw(1603px);
  }

  .logo {
    width: vw(48px);
    height: auto;
  }

  .logo-text {
    margin-left: vw(8px);
    font-size: vw(23px);
    font-weight: 700;
    color: #fff;
  }

  .login-btn {
    background: rgba($color: #b90203, $alpha: 0.9);
  }

  .login-text {
    font-size: vw(16px);
    font-weight: 700;
    color: #fff;
  }

  .logout-text {
    margin-left: vw(38px);
    font-size: vw(14px);
    font-weight: 600;
    color: #fff;

    &:hover {
      cursor: pointer;
    }
  }
}

.title {
  top: vw(140px);
  font-size: vh(122px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -2px;
  color: #fff;
}

.desc-container {
  top: vw(297px);

  .desc {
    width: vw(1100px);
    font-size: vh(31px);
    color: #fff;
  }
}

.info-card-container {
  top: vw(558px);

  .info-card {
    width: vw(1434px);
    height: vw(136px);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 14px 0 rgba(29, 29, 29, 0.15);

    .card {
      width: vw(476px);
      height: vw(136px);

      .img {
        margin: 0 vw(35px);
      }

      .cloud-img {
        width: vw(81px);
        height: auto;
      }

      .simple-img {
        width: vw(66px);
        height: auto;
      }

      .user-img {
        width: vw(53px);
        height: auto;
      }

      .title {
        font-size: vw(24px);
        font-style: normal;
        color: #333;
      }

      .desc {
        width: vw(285px);
        margin-top: vh(14px);
        font-size: vw(16px);
        line-height: vw(24px);
        color: #999;
      }
    }

    .split {
      width: vw(2px);
      height: vw(126px);
      background: linear-gradient(0deg, #fff 0%, #ccc 48%, #fff 100%);
      opacity: 1;
    }
  }
}

.app-title {
  margin-top: vw(151px);
  margin-bottom: vw(50px);
  font-size: vw(33px);
  font-weight: 500;
  color: #333;
}

.carousel-container {
  width: 100%;
  height: vw(384px);
  box-sizing: border-box;

  .card-container {
    width: vw(1350px);

    .card {
      width: vw(603px);
      height: vw(241px);
      background: #fff;

      .img {
        width: vw(126px);
        height: vw(126px);
        margin-right: vw(42px);
        margin-left: vw(56px);
      }

      .title {
        font-size: vw(24px);
        font-style: normal;
        color: #333;
      }

      .desc {
        width: vw(320px);
        margin: vw(14px) 0;
        font-size: vw(16px);
        line-height: vw(24px);
        color: #999;
      }

      .tip-text {
        font-size: vw(16px);
        color: #39b6fe;

        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

    .mg-left-card {
      margin-left: vw(81px);
    }
  }

  .arrow {
    top: 50%;
    width: vw(52px);
    height: vw(52px);
    transform: translateY(-100%);

    &:hover {
      cursor: pointer;
    }
  }

  .arrow-left {
    left: vw(162px);
  }

  .arrow-right {
    right: vw(162px);
  }
}

.banner {
  height: vw(562px);
  font-style: normal;

  .banner-left {
    width: 100%;
    height: 100%;
    background: #fff;

    .img {
      margin-left: vw(185px);
    }
  }

  .banner-right {
    width: 100%;
    height: 100%;

    .img {
      margin-right: vw(185px);
    }
  }

  .title {
    font-size: vw(32px);
    font-style: normal;
    font-weight: 700;
    color: #333;
  }

  .sub-title {
    margin-top: vw(37px);
    margin-bottom: vw(21px);
    font-size: vw(24px);
    line-height: vw(34px);
    color: #333;
  }

  .desc {
    font-size: vw(20px);
    line-height: vw(34px);
    color: #999;
  }

  .nav {
    margin-top: vw(35px);
    font-size: vw(16px);
    color: #d9001b;

    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .img {
    width: vw(455px);
    height: auto;
    transition: transform 1s;

    &:hover {
      cursor: pointer;
      transform: translateY(-30px);
    }
  }

  .line {
    position: absolute;
    top: vw(-10px);
    left: vw(-25px);
    width: vw(6px);
    height: vw(55px);
    background: #da0014;
  }
}

.contace-us-container {
  width: 100%;
  height: vh(345px);
  background: #000;

  .title {
    margin-right: vw(200px);
    font-size: vw(61px);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2px;
    color: #fff;
  }

  .sub-title {
    margin-bottom: vh(17px);
    font-size: vw(20px);
    color: #d9001b;
  }

  .address {
    margin-top: vh(17px);
  }

  .desc {
    margin-bottom: vh(13px);
    font-size: vw(16px);
    color: #fff;

    .icon {
      width: vw(22px);
      height: auto;
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: vh(80px);
  background: rgba($color: #000, $alpha: 0.6);
}
</style>
